<template>
	<view v-if="token">
		<view class="user_info_wrap">
			<view class="user_img_wrap">
				<image src="../../static/OIP-C.jpg" mode="" class="user_img"></image>
				<view class="user_name">幽默</view>
			</view>
		</view>
	
		<view class="user_content">
			<view class="user_main">
				<!-- 浏览历史 -->
				<view class="user_history">
					<view class="box">
						<view class="his_num">0</view>
						<view class="his_name">收藏的店铺</view>
					</view>
					<view class="box">
						<view class="his_num">0</view>
						<view class="his_name">收藏的商品</view>
					</view>
					<view class="box">
						<view class="his_num">0</view>
						<view class="his_name">关注的商品</view>
					</view>
					<view class="box">
						<view class="his_num">0</view>
						<view class="his_name">我的足迹</view>
					</view>
				</view>
	
				<!-- 我的订单 -->
				<view class="user_orders">
					<view class="oders_title">
						<view @tap="gotoOrder">我的订单</view>
						<text>></text>
					</view>
					<view class="oders_content">
						<view class="boxTwo" @tap="gotoOrder(0)">
							<view class="iconfont icon-quanbudingdan"></view>
							<view class="oders_name">全部订单</view>
						</view>
						<view class="boxTwo">
							<view class="iconfont icon-daifukuan" @tap="gotoOrder(1)"></view>
							<view class="oders_name">待付款</view>
						</view>
						<view class="boxTwo">
							<view class="iconfont icon-daishouhuo" @tap="gotoOrder(2)"></view>
							<view class="oders_name">待收货</view>
						</view>
						<view class="boxTwo">
							<view class="iconfont icon-tuikuantuihuo" @tap="gotoOrder(3)"></view>
							<view class="oders_name">退款/退货</view>
						</view>
					</view>
				</view>
	
				<!-- 收货地址 -->
				<view class="user_address_wrap">
					<text>收获地址管理</text>
					<text>></text>
				</view>
	
				<!-- 详细信息 -->
				<view class="app_info_wrap ">
					<view class="app_info_item app_info_contact">
						<text>联系客服</text>
						<text>400-618-4000</text>
					</view>
					<view class="app_info_item app_info_contact">
						<text>意见反馈</text>
						<text>></text>
					</view>
					<view class="app_info_item app_info_contact">
						<text>关于我们</text>
						<text>></text>
					</view>
				</view>
	
				<!-- 推荐 -->
				<view class="user_logout">
					<view @tap="logout">退出登录</view>
					<text>></text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				token: '',
				userInfo: {},
				myFeet: [{
						id: 0,
						num: 0,
						text: '收藏的店铺'
					},
					{
						id: 1,
						num: 2,
						text: '收藏的商品'
					},
					{
						id: 2,
						num: 0,
						text: '关注的商品'
					},
					{
						id: 3,
						num: 0,
						text: '我的足迹'
					},
				]
			}
		},
		onShow() {
			this.userInfo = uni.getStorageSync('userinfo');
			this.token = uni.getStorageSync('token');
			if (!this.token) {
				uni.setStorageSync('page', 'user')
				uni.reLaunch({
					url: '../../subpkg2/login/login'
				});
			}
		},
		methods: {
			//退出登录
			async logout() {
				const succ = await uni.showModal({
					title: '提示',
					content: '确定退出登录吗？'
				});
				// console.log(res);
				// 点击确认后，清除缓存的token、address、userinfo
				if (succ && succ.confirm) {
					uni.removeStorageSync('token');
					uni.removeStorageSync('address');
					uni.removeStorageSync('userinfo');
					uni.setStorageSync('page', 'user');
					uni.reLaunch({
						url: '../../subpkg2/login/login'
					})
				}
			},
			//跳转到订单查询页
			gotoOrder(num) {
				uni.navigateTo({
					url: '../../subpkg2/order/order?num=' + num
				})
			}
		}
	}
</script>

<style lang="scss">
	
		page {
			background-color: #edece8;
			padding-bottom: 80rpx;
		}
	
		.user_info_wrap {
			height: 40vh;
			background-color: #e80f0f;
	
			.user_img_wrap {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				padding-top: 155rpx;
	
				.user_img {
					width: 25%;
					height: 180rpx;
					border-radius:50%;
				}
	
				.user_name {
					color: #ffffff;
					font-size: 35rpx;
					font-family: '微软雅黑';
					padding: 30rpx;
				}
			}
		}
	
		.user_content {
			// position: relative;
	
			.user_main {
				color: #666;
				
	
				.user_history {
					background-color: #fff;
					display: flex;
					height: 100rpx;
	
					.box {
						flex: 1;
						text-align: center;
						padding: 10rpx 0;
	
						.his_num {
							color: #fc0000;
						}
					}
				}
	
				.user_orders {
					background-color: #fff;
					margin-top: 25rpx;
	
					.oders_title {
						padding: 20rpx;
						border-bottom: 1rpx solid #ccc;
						display: flex;
						justify-content: space-between;
						color: #e80f0f;
					}
	
					.oders_content {
						display: flex;
	
						.boxTwo {
							padding: 15rpx 0;
							flex: 1;
							text-align: center;
	
							.iconfont {
								color: #fc0000;
								font-size: 40rpx;
							}
	
							.oders_name {}
						}
					}
				}
			}
	
			.user_address_wrap {
				margin-top: 30rpx;
				background-color: #fff;
				padding: 20rpx;
				display: flex;
				justify-content: space-between;
			}
	
			.app_info_wrap {
				margin-top: 30rpx;
				background-color: #fff;
	
				.app_info_item {
					padding: 20rpx;
					border-bottom: 1px solid #ccc;
				}
	
				.app_info_contact {
					display: flex;
					justify-content: space-between;
				}
			}
	
			
			.user_logout{
				margin-top: 30rpx;
				background-color: #fff;
				padding: 20rpx;
				display: flex;
				justify-content: space-between;
				color: #e80f0f;
			}
		}
</style>